<template>
  <div class="CeremonyHall h100" v-loading="loading">
    <div class="PageContent">
      <el-form
        :model="ruleForm"
        :inline="true"
        ref="ruleForm"
        label-width="120px"
        class="PageItem margintop20"
      >
        <el-row class="PageInfo">
          <i class="info-bar"></i>零售业务列表
        </el-row>
        <el-row :gutter="5" class="fileSearch">
          <el-form-item label="零售业务编码:">
            <el-input v-model="ruleForm.retailBusinessCode" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="付款单位:">
            <el-input v-model="ruleForm.payerName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="零售日期:">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="ruleForm.retailTimeStart"
              format="yyyy-MM-dd"
            ></el-date-picker>
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="ruleForm.retailTimeEnd"
              format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('search')">查询</el-button>
            <el-button type="primary" @click="add('search')">新增</el-button>
          </el-form-item>
        </el-row>

        <el-table
          :data="tableData"
          border
          :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          stripe
          :height="tableHeight"
        >
          <el-table-column align="center" prop="retailBusinessCode" label="零售业务编号" width="200"></el-table-column>
          <el-table-column prop="businessCode" align="center" label="逝者业务编号" width="150"></el-table-column>
          <el-table-column prop="deadName" align="center" label="逝者姓名" width="120"></el-table-column>
          <el-table-column prop="payerName" align="center" label="付款人（付款单位）" width="150"></el-table-column>
          <el-table-column prop="totalCharge" align="center" label="合计金额" width="200"></el-table-column>
          <el-table-column prop="asSettled" align="center" label="是否结算" width="120"></el-table-column>
          <el-table-column prop="remark" align="center" label="备注信息" width="120"></el-table-column>
          <el-table-column prop="createUserName" align="center" label="添加人" width="150"></el-table-column>
          <el-table-column prop="gmtCreate" align="center" label="添加时间" width="150"></el-table-column>

          <el-table-column prop="processState" align="center" label="操作" width>
            <template v-slot="scope">
              <el-button size="mini" @click="modify(scope.row)">修改</el-button>
              <el-button size="mini" @click="Delete(scope.row)">删除</el-button>
              <el-button size="mini" @click="settlement(scope.row)">结算</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;
                    height: 0px;
                    line-height: 20px;
                    font-size: 18px;">
          显示{{
            pager.total === 0 ? 0 : (Math.ceil(pager.total / pager.pageSize) > 1 ? ((pager.currentPage - 1) * pager.pageSize + 1) : (1))
          }}到{{
            pager.total === 0 ? 0 : ((Math.ceil(pager.total / pager.pageSize) === pager.currentPage) ? (pager.total) : (pager.currentPage * pager.pageSize))
          }}条
        </div>
        <p style="text-align: right;margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            :page-sizes="[10,20,30,50]"
            background
            layout="total,sizes,prev, pager, next, jumper"
            :total="pager.total"
          ></el-pagination>
        </p>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as Type from "@/api/service";
import * as user from "@/api/user";
import {dataFormatetmd} from "@/utils/index";

export default {
  name: "RetailList",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      dictionary: {
        dicts: {},
        users: {},
      }, //字典
      type: [],

      ruleForm: {
        //模糊查询有问题，暂时注释
        retailBusinessCode: "", //零售业务编码
        payerName: "", //付款单位
        retailTimeStart: "", //开始日期
        retailTimeEnd: "", //截至日期
      },
      pager: {
        pageSize: 20, //页面大小
        total: 1,
        currentPage: 1, //第几页
      },
      tableData: [],
      tableHeight: 0,
      //按钮权限
      btnRight: {
        btnCeremonyHallSearch: true, //查询
        btnCeremonyHallExport: true, //导出excel
      },
    };
  }, //载入按钮
  mounted() {
    this.btnRight = this.$route.meta.buttons;
    //遍历属性赋值将true与false字符串转换成布尔型的值
    for (var key of Object.keys(this.btnRight)) {
      this.btnRight[key] =
        this.btnRight[key] || this.btnRight[key] == "true" ? true : false;
    }
    this.onSubmit();
    var that = this;
    window.onresize = function () {
      var search = document.getElementsByClassName("fileSearch")[0]
        .offsetHeight;
      var dom = document.getElementsByClassName("PageContent")[0].offsetHeight;
      that.tableHeight = dom - search - 250;
    };
  },
  //注销window.onresize事件
  destroyed() {
    window.onresize = null;
  },
  updated() {
    this.$nextTick(() => {
      var dom = document.getElementsByClassName("PageContent")[0].offsetHeight;
      var search = document.getElementsByClassName("fileSearch")[0]
        .offsetHeight;
      this.tableHeight = dom - search - 250;
    });
  },
  methods: {
    onSubmit(value) {
      this.loading = true;
      if (value) {
        this.pager.currentPage = 1;
      }
      this.ruleForm.retailTimeStart = dataFormatetmd(
        new Date(this.ruleForm.retailTimeStart)
      );
      this.ruleForm.retailTimeEnd = dataFormatetmd(
        new Date(this.ruleForm.retailTimeEnd)
      );
      var postData = {
        pageSize: this.pager.pageSize,
        currentPage: this.pager.currentPage,
        ...this.ruleForm,
      };
      //   if (this.ruleForm.businessType == 0) {
      //     postData.businessType = null;
      //   }
      //查询接口
      Type["LoadRetailBusinessList"](postData)
        .then((response) => {
          // console.log(response, "查询接口数据源")
          const {data} = response;
          if (!data) {
            this.loading = false;
            this.$message("数据读取失败");
            return;
          }
          this.tableData = data.list;
          this.pager = data.pager;
          this.loading = false;
          //   //数据读取成功
        })
        .catch((error) => {
          this.$message(error);
          this.loading = false;
          this.tableData = [];
        });
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pager.pageSize = size;
      this.onSubmit();
    },
    handleCurrentChange: function (currentPage) {
      this.pager.currentPage = currentPage;
      this.onSubmit(); //点击第几页
    },
    Delete({id, version}) {
      Type.DeleteRetailBusinessWithId({id, version}).then((res) => {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.onSubmit();
      });
    },
    modify({id}) {
      // 路由history模式刷新会导致页面id丢失，要重新进才可以
      this.$router.push({
        name: "home.retail.RetailInfo",
        params: {id},
      });
    },

    //根据车型加载车辆   //暂时写死

    add() {
      this.$router.push({
        name: "home.retail.RetailInfo",
      });
    },
    settlement({retailBusinessCode}) {
      // console.log(row);
      // return;
      this.$router.push({
        name: "home.retail.RetailSettle",
        params: {retailBusinessCode},
      });
    },
  },
};
</script>

<style scoped>
.w150 {
  width: 150px;
}

.w1230 {
  width: 72.5vw !important;
  min-width: 40px !important;
}

.DescriptionOfCharges {
  /* style="width:100vm; */
  widows: 100vm;
  height: 70px;
  background: #f0f0f0;
  border-left: 5px solid #a9c3de;
  padding-top: 20px;
  padding-left: 10px;
}

.DescriptionOfCharges > p {
  /* style="width:100vm; */
  margin-left: 30px;
  margin-top: 5px;
}
</style>
